import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '@/contexts/authContext';
import { Toaster, toast } from 'sonner';
import { UserCircle, LogOut, Settings, HelpCircle, Star, Heart } from 'lucide-react';

export default function ProfilePage() {
  const { isAuthenticated, currentUser, logout } = useContext(AuthContext);
  const navigate = useNavigate();

  // 处理退出登录
  const handleLogout = () => {
    toast('您已成功退出登录');
    logout();
    navigate('/login');
  };

  // 未登录时不渲染内容
  if (!isAuthenticated) return null;

  return (
    <div className="min-h-screen bg-gradient-to-b from-pink-50 to-blue-50 flex flex-col pb-20 text-gray-800">
      <div className="container mx-auto flex-1 flex flex-col">
      <Toaster />
      
      {/* 顶部导航栏 */}
      <header className="bg-white/80 backdrop-blur-md border-b border-pink-100 px-4 py-3 flex justify-between items-center shadow-sm">
        <div className="flex items-center">
          <span className="text-2xl font-bold text-gradient">
            <span className="text-pink-400">✨</span> 智绘童话AI工场
          </span>
        </div>
      </header>

      {/* 个人信息区域 */}
      <section className="px-6 pt-8 pb-4">
        <div className="flex items-center">
          <div className="w-20 h-20 rounded-full bg-gradient-to-r from-pink-100 to-blue-100 flex items-center justify-center border border-pink-200 mr-4">
            <UserCircle size={36} className="text-pink-400" />
          </div>
          <div>
            <h1 className="text-xl font-bold text-gray-800">{currentUser || '创作者'}</h1>
            <p className="text-gray-500 mt-1">智绘童话创作者</p>
          </div>
        </div>
      </section>

      {/* 功能菜单 */}
      <section className="px-6 mb-8">
        <div className="bg-white rounded-xl border border-pink-100 shadow-sm overflow-hidden">
          {/* 收藏的故事 */}
          <button 
            className="w-full flex items-center justify-between p-4 hover:bg-pink-50 transition-colors"
            onClick={() => navigate('/collection')}
          >
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-4">
                <Heart size={20} className="text-pink-400" />
              </div>
              <span className="text-gray-700">我的收藏</span>
            </div>
            <span className="text-gray-400">→</span>
          </button>
          
          {/* 我的喜欢 */}
          <button 
            className="w-full flex items-center justify-between p-4 hover:bg-pink-50 transition-colors border-t border-pink-100"
          >
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                <Star size={20} className="text-blue-400" />
              </div>
              <span className="text-gray-700">我的喜欢</span>
            </div>
            <span className="text-gray-400">→</span>
          </button>
          
          {/* 设置 */}
          <button 
            className="w-full flex items-center justify-between p-4 hover:bg-pink-50 transition-colors border-t border-pink-100"
          >
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4">
                <Settings size={20} className="text-purple-400" />
              </div>
              <span className="text-gray-700">设置</span>
            </div>
            <span className="text-gray-400">→</span>
          </button>
          
          {/* 帮助中心 */}
          <button 
            className="w-full flex items-center justify-between p-4 hover:bg-pink-50 transition-colors border-t border-pink-100"
          >
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4">
                <HelpCircle size={20} className="text-green-400" />
              </div>
              <span className="text-gray-700">帮助中心</span>
            </div>
            <span className="text-gray-400">→</span>
          </button>
        </div>
      </section>

      {/* 退出登录按钮 */}
      <section className="px-6 mb-8">
        <button
          onClick={handleLogout}
          className="w-full bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 font-medium py-3 px-4 rounded-lg hover:from-pink-200 hover:to-blue-200 transition-colors flex items-center justify-center"
        >
          <LogOut size={18} className="mr-2" /> 退出登录
        </button>
      </section>

      {/* 底部导航栏 */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-md border-t border-pink-100 h-16 flex justify-around items-center z-10 shadow-sm">
        <button onClick={() => navigate('/home')} className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-xl">🏠</span>
          <span className="text-xs mt-1">首页</span>
        </button>
        <button onClick={() => navigate('/generate')} className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-xl">✨</span>
          <span className="text-xs mt-1">生成</span>
        </button>
        <button onClick={() => navigate('/collection')} className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-xl">❤️</span>
          <span className="text-xs mt-1">收藏</span>
        </button>
        <button onClick={() => navigate('/profile')} className="flex flex-col items-center justify-center text-pink-500">
          <span className="text-xl">👤</span>
          <span className="text-xs mt-1">我的</span>
        </button>
      </nav>
      </div>
    </div>
  );
}